<template>
	<view class="wapper">
		<TopNav title="搭搭认证" bg-color="#fff" :autoBack="autoBack" @left="handleTopNavBack"></TopNav>
		<view class="main">
			<view class="steps-container">
				<view class="steps flex justify-between align-center margin-center">
					<view class="text-center">
						<image src="/static/images/login/steps-start.png" class="width-24" mode="widthFix"
							v-if="stepsNumber === 1"></image>
						<image src="/static/images/login/steps-finish.png" class="width-20" style="margin: 2rpx;"
							mode="widthFix" v-if="stepsNumber > 1"></image>
						<view class="m-t5">
							<text class="f-s11 f-w500">身份认证</text>
						</view>
					</view>
					<view class="steps-line self-start"></view>
					<view class="text-center">
						<image src="/static/images/login/steps-start.png" class="width-24" mode="widthFix"
							v-if="stepsNumber === 2"></image>
						<image src="/static/images/login/steps-2.png" class="width-20" style="margin: 2rpx;"
							mode="widthFix" v-if="stepsNumber === 1"></image>
						<image src="/static/images/login/steps-finish.png" class="width-20" style="margin: 2rpx;"
							mode="widthFix" v-if="stepsNumber > 2"></image>
						<view class="m-t5">
							<text class="f-s11 f-w500" :class="{'text-gray':stepsNumber < 2}">个人资料</text>
						</view>
					</view>
					<view class="steps-line self-start"></view>
					<view class="text-center">
						<image src="/static/images/login/steps-start.png" class="width-24" mode="widthFix"
							v-if="stepsNumber === 3"></image>
						<image src="/static/images/login/steps-3.png" class="width-20" style="margin: 2rpx;"
							mode="widthFix" v-if="stepsNumber !== 3"></image>
						<view class="m-t5">
							<text class="f-s11 f-w500" :class="{'text-gray':stepsNumber < 3}">提交审核</text>
						</view>
					</view>
				</view>
			</view>
			<view class="scroll-container">
				<Identity v-if="stepsNumber === 1" @confirm="handleStepsChange"></Identity>
				<Personal v-if="stepsNumber === 2" :current="current" @confirm="handleStepsChange"></Personal>
				<Audit v-show="stepsNumber === 3" @confirm="handleStepsChange"></Audit>
			</view>
		</view>
		<Toast></Toast>
	</view>
</template>

<script>
	import Identity from './identity.vue';
	import Personal from './personal.vue';
	import PersonalImage from './personal-image.vue';
	import Audit from './audit.vue'
	import permision from "@/common/permission.js"
	import {
		identityAuth,
		registerAuth
	} from "@/api/mine/auth.js"
	export default {
		name: "",
		components: {
			Identity,
			Personal,
			PersonalImage,
			Audit
		},
		data() {
			return {
				autoBack:true,
				stepsNumber: 1,
				current:1
			}
		},
		onLoad(query) {
			if (query.stepsNumber) {
				this.stepsNumber = Number(query.stepsNumber)
				this.current = Number(query.current || 1)
			}
		},
		onShow() {
			this.autoBack = true
			this.checkPermission()
			let routeList = getCurrentPages()
			if(routeList.length <2){
				// 当前页为第一页，阻止点击返回自动触发回到上一页，从而阻止点击两次退出应用提示
				this.autoBack = false
				
			}
		},
		methods: {
			// 点击返回
			handleTopNavBack(){
				if(!this.autoBack) this.$tab.reLaunch('/pages/login/index')
			},
			async checkPermission() {
				// 判断相机权限
				let status = permision.isIOS ? await permision.requestIOS('camera') :
					await permision.requestAndroid('android.permission.CAMERA');
				if (status === 0) {
					uni.showModal({
						title: "提示",
						content: '相机权限未开启，请前往设置打开授权',
						confirmText: '前往设置',
						success: (res) => {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							} else {
								this.$toast('拒绝授权将无法拍摄照片')
							}
						}
					})
				}
			},
			handleStepsChange(num) {
				if (num < 4) {
					this.stepsNumber = num
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.wapper {
		.main {
			// @include fixed-height;
			// @include fixed-bottom;
			box-sizing: border-box;
			// overflow: hidden;
			display: flex;
			flex-direction: column;

			.steps-container {
				width: 100%;
				position: sticky;
				@include sticky-top;
				z-index: 999;
				background-color: #fff;

				.steps {
					margin: 0 auto;
					width: 588rpx;
					padding: 38rpx 0 60rpx 0;
					box-sizing: border-box;
					flex-shrink: 0;

					.steps-line {
						width: 104rpx;
						height: 2rpx;
						border: 4rpx solid #DDE0E6;
						margin-top: 22rpx;
					}
				}
			}


			.scroll-container {
				@include fixed-bottom;
				box-sizing: border-box;

			}
		}
	}
</style>